<template>
	<view class="detail-ap">
		<view class="main">
			<view class="circul" v-for="(item,index) in circulList">
				<view class="" style="display: row;">
					<view class="type" :style="{'background-color': '#00B853' }"></view>
					<view class="arrows" v-if="index==0 "></view>
					<view class="arrow" v-else></view>
					<view class="link"></view>
				</view>
				<view class="circul_content">
					<view class="" :style="{'color': '#00B853' }" style="font-weight: 600;">
						{{item.nodeName== '新建' ? '提交申请' :  item.other.orgName   ? '部门分派' :item.nodeName}}
					</view>
					<view class="circul_field" v-if="item.nodeName== '新建'">
						{{'提交人：' }} {{ item.other.zlbUser || '暂无' }}
					</view>
					<view class="circul_field" v-else>
						{{'审核人：' }} {{ item.nodeName=='运输企业审核' ?   item.other.check_company_name :  item.realName || '暂无' }}({{item.orgNameStr || '企业' }})
					</view>
					<view class="circul_field">
						时间：{{item.createTime || '暂无' }}
					</view>
					<view class="circul_field" v-if="item.pranertId!=0 && !item.other.orgName">
						{{item.other.result== '关闭' ?'审核结果：工单关闭': item.other.result== '退单整改' ? '审核结果：退单整改': item.other.result== '返回上一节点' ? '审核结果：上一节点': item.other.content== '工单转发' ? '审核结果：工单转发' : '审核结果：审核通过' }}
					</view>
					<view class="circul_field" v-if="item.pranertId!=0 && !item.other.orgName">
						{{item.other.result!= '新建工单' ?'审核内容：'+item.other.content+ '.' : ''}}
						<!-- {{item.other.result== '关闭' ?'审核内容：'+item.other.content+ '.' : item.other.result== '退单整改' ? '审核内容：'+item.other.content+ '.'  : item.other.result== '返回上一节点' ? '审核内容：'+item.other.content+ '.'  : item.other.result== '工单核验' ?'审核内容：'+item.other.content+ '.'  : item.other.result== '部门审核通过'? '审核内容：'+item.other.content+ '.' :'' }} -->
					</view>
					<view class="circul_field" v-if="item.other.orgName">
						已分派部门:{{item.other.orgName.join(',')}}.
					</view>
					<view class="circul_field" v-if="item.pranertId!=0 && item.other.content== '工单转发'">
						{{'被指派人：' + item.other.person}}
					</view>
					<view class="circul_field" v-show="item.type==2" v-for="itemchuzhi in chuzhiarr">
						<view class="circul_field" v-if=" itemchuzhi.type == 'text' ">
							{{itemchuzhi.display_name}} ：{{itemchuzhi.value}}
						</view>
						<view class="circul_field" v-if=" itemchuzhi.type == 'img' ">
							<view class="">
								{{itemchuzhi.display_name}} ：
							</view>
							<img v-if=" itemchuzhi.type == 'img' " v-for="item in itemchuzhi.value"
								@click="previewPicchuzhi" :src="itemchuzhi.url" alt="">
						</view>
					</view>
					<view :class="[item.type == 0 ? 'circul-tag1' : item.type == 7 ? 'circul-tag2' : item.type == 8 ? 'circul-tag3' : '']"></view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		getWorkOrderLogs,
	} from '@/pages/api/orderp/orderp.js';
	import methodMix from '@/pages/index/approval/chutu/methodMix_chutu.js';
	import {
		mapState
	} from 'vuex';
	export default {
		mixins: [methodMix],
		computed: {
			...mapState('mdOrder', ['orderIdSp']),
		},
		data() {
			return {
				circulList: [],
				chuzhiarr: [],
			}
		},
		mounted() {
			console.log('审核历史工单ID: ', this.orderIdSp)
			this.getcircul()
		},
		methods: {
			//工单流记录
			getcircul() {
				getWorkOrderLogs({
					id: this.orderIdSp
				}).then(res => {
					res.forEach(z => {
						if (z.type == 2 && z.other.formValue) {
							z.other.formValue.forEach(d => {
								this.chuzhiarr.push({
									display_name: d.display_name,
									value: d[d.name],
									type: d.type
								})
							})
						}
					})
					console.log('审核历史工单列表: ',res)
					this.circulList = res
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail-ap {
		width: 750rpx;
		display: flex;
		flex-direction: column;

		.main {
			flex: 1;
			width: 750rpx;
			background-color: #F2F3F5;
			overflow-x: hidden;

			.mian-title {
				padding: 32rpx;
				height: 96rpx;
				background-color: #FFFFFF;

				.xq_title {
					font-weight: 600;
					font-size: 40rpx;
					color: #363A44;
					margin-bottom: 24rpx;
				}

				.xq_type {
					font-size: 28rpx;
					color: #B5B7BA;
				}
			}

			.circul {
				display: flex;
				margin-top: 20rpx;
				margin-left: 22rpx;
				margin-bottom: 40rpx;
				width: 750rpx;
				.link{
					background-color: #00B853;
					width: 4rpx;
					height: 210rpx;
					border-radius: 50rpx;
					margin-left: 7.6rpx;
					margin-top: -26rpx;
				}

				.arrows {
					margin-top: 8rpx;
					width: 15rpx;
					height: 15rpx;
					display: inline-block;
					border-top: 2px solid #00B853;
					border-left: 2px solid #00B853;
					transform: rotate(45deg);
				}

				.arrow {
					margin-top: 8rpx;
					width: 15rpx;
					height: 15rpx;
					// background-color: #F0AD4E;
				}

				.type {
					margin-top: 22rpx;
					height: 20rpx;
					width: 20rpx;
					background-color: #2979FF;
					color: #FFFFFF;
					font-size: 31rpx;
					border-radius: 50rpx;
					text-align: center;
					line-height: 50rpx;
				}
				.circul_content {
					padding: 22rpx;
					margin-left: 22rpx;
					background-color: #FFFFFF;
					width: 588rpx;
					border-radius: 10rpx;
					position: relative;
					.circul_field {
						margin-top: 22rpx;
					}
					.circul-tag1{
						position: absolute;
						top: 0;
						right: 0;
						width: 100rpx;
						height: 100rpx;
						background: url(/static/type-start.png) no-repeat;
						background-size: 100% 100%;
					}
					.circul-tag2{
						position: absolute;
						top: 0;
						right: 0;
						width: 100rpx;
						height: 100rpx;
						background: url(/static/type-end.png) no-repeat;
						background-size: 100% 100%;
					}
					.circul-tag3{
						position: absolute;
						top: 0;
						right: 0;
						width: 100rpx;
						height: 100rpx;
						background: url(/static/type-close.png) no-repeat;
						background-size: 100% 100%;
					}
				}
			}
		}

	}
</style>
